<template>
  <view class="useCoupon">
    <u-popup
      v-model="showCoupon"
      mode="bottom"
      height="66%"
      border-radius="20"
      @close="close"
    >
      <view class="popup">
        <view class="title">优惠券</view>
        <view class="slect_tab">
          <view :class="current == 0 ? 'active_tab' : 'tab'" @click="selectUse"
            >可用优惠券({{ canUseNumber }})</view
          >
          <view
            :class="current == 1 ? 'active_tab' : 'tab'"
            @click="selectNoUse"
            >不可用优惠券({{ noCanUseNumber }})</view
          >
        </view>

        <scroll-view class="content-list" scroll-y @scrolltolower="loadMore">
          <view class="canUse_box" v-if="current == 0">
            <view
              class="use_box"
              v-for="(item, index) in couponList"
              :key="index"
              @click="selectCoupon(item, index)"
            >
              <shopro-coupon
                bgcolor="red"
                :amount="item.amount"
                :enough="item.enough"
                :name="item.name"
                :usetimeend_text="item.usetimeend_text"
                :description="item.description"
                :effect_type="item.effect_type"
              ></shopro-coupon>
              <view
                :class="
                  item.isCheck == true ? 'active_select_box' : 'select_box'
                "
                ><u-icon
                  name="checkbox-mark"
                  color="#EC565A"
                  size="22"
                  v-if="item.isCheck == true"
                ></u-icon
              ></view>
            </view>
          </view>
          <view class="noCanUse_box" v-if="current == 1">
            <shopro-coupon
              bgcolor="gray"
              :amount="item.amount"
              :enough="item.enough"
              :name="item.name"
              :usetimeend_text="item.usetimeend_text"
              :description="item.description"
              :effect_type="item.effect_type"
              v-for="(item, index) in nocCouponList"
              :key="index"
            ></shopro-coupon
          ></view>
        </scroll-view>

        <view class="bottom_btn" v-if="current == 0">
          <view class="btn" @click="toUsed">确认</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
/**
 *shoproCoupon - 优惠券使用弹出层
 * @property {Boolean} show - 弹出层显影
 * @property {String} order_sn - 订单号 必须传
 * @method noShow 关闭弹出层
 * @method useCoupon 使用优惠券 参数为选中的优惠券对象
 */
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  props: {
    show: {
      type: [Boolean],
      default: false,
    },
    order_sn: {
      type: [String],
      default: '',
    },
  },
  data() {
    return {
      showCoupon: false,
      current: 0,
      checkCoupon: {}, //选中的优惠券
      couponList: [],
      nocCouponList: [],
      use_status: 3, //3=可用,4=不可用
      usePage: 1,
      noUsePage: 1,
      rows: 10,
      canUseNumber: 0,
      noCanUseNumber: 0,
      canUseFinish: false, //可用优惠券下拉加载完成
      noCanUseFinish: false, //不可用优惠券下拉加载完成
    };
  },

  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {
    show(val) {
      this.showCoupon = val;
    },
  },
  onLoad() {},
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {},
  mounted() {
    this.getUseCouponList();
    this.getnoUseCouponList();
  },
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    close() {
      this.$emit('noShow', false);
    },
    selectUse() {
      this.current = 0;
    },
    selectNoUse() {
      this.current = 1;
    },
    //获取可用优惠券列表
    getUseCouponList() {
      this.$http(
        'v1.getCouponList',
        {
          page: this.usePage,
          rows: this.rows,
          use_status: 3,
          order_sn: this.order_sn,
        },
        '请稍等'
      ).then((res) => {
        if (res.code === 1) {
          this.canUseNumber = res.data.total;
          this.canUseFinish = res.data.list.length < this.rows ? true : false;
          let array = res.data.list.map((item) => {
            item.isCheck = false;
            return item;
          });
          this.couponList = [...this.couponList, ...array];
		  if(this.couponList.length){
			  this.couponList[0].isCheck=true
			  this.$emit('useCoupon', this.couponList[0]);
		  }
        }
      });
    },
    //获取不可用优惠券列表
    getnoUseCouponList() {
      this.$http(
        'v1.getCouponList',
        {
          page: this.noUsePage,
          rows: this.rows,
          use_status: 4,
          order_sn: this.order_sn,
        },
        '请稍等'
      ).then((res) => {
        if (res.code === 1) {
          this.noCanUseNumber = res.data.total;
          this.noCanUseFinish = res.data.list.length < this.rows ? true : false;
          this.nocCouponList = [...this.nocCouponList, ...res.data.list];
        }
      });
    },
    selectCoupon(item, index) {
		console.log("rrrr")
      if (item.isCheck == false) {
        let arr = [...this.couponList];
        this.couponList = arr.map((e) => {
          e.isCheck = false;
          return e;
        });
        item.isCheck = true;
        this.$set(this.couponList, index, item);
        this.checkCoupon = item;
      } else {
        item.isCheck = false;
        this.checkCoupon = {};
      }
    },
    //使用优惠券按钮
    toUsed() {
      _delay(() => {
        this.$emit('useCoupon', this.checkCoupon);
        this.close();
      });
    },
    //下拉加载更多
    loadMore() {
      if (this.current == 0) {
        if (this.canUseFinish) return;
        this.usePage += 1;
        this.getUseCouponList();
      }
      if (this.current == 1) {
        if (this.noCanUseFinish) return;
        this.noUsePage += 1;
        this.getnoUseCouponList();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.useCoupon {
  .popup {
    width: 100%;
    height: 100%;
    padding: 30rpx 50rpx;
    display: flex;
    flex-direction: column;
    position: relative;
    .title {
      font-size: 36rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 700;
      color: #111111;
    }
    .slect_tab {
      display: flex;
      justify-content: flex-start;
      height: 50rpx;
      width: 100%;
      align-items: center;
      .tab {
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #979797;
        margin-right: 76rpx;
      }
      .active_tab {
        font-size: 24rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 700;
        color: #111111;
        position: relative;
        margin-right: 76rpx;
        &::before {
          content: '';
          position: absolute;
          width: 60%;
          height: 4rpx;
          background-color: #a084f0;
          left: 16%;
          bottom: -8rpx;
        }
      }
    }
    .canUse_box {
      flex: 1;
      width: 100%;
      // overflow: auto;
      margin-top: 20rpx;
      padding-bottom: 80rpx;
      .use_box {
        position: relative;
        .select_box {
          position: absolute;
          right: 30rpx;
          top: 76rpx;
          width: 30rpx;
          height: 30rpx;
          border: 2rpx solid #ffffff;
          z-index: 99;
          border-radius: 50%;
          text-align: center;
          line-height: 26rpx;
        }
        .active_select_box {
          position: absolute;
          right: 30rpx;
          top: 76rpx;
          width: 30rpx;
          height: 30rpx;
          border: 2rpx solid #ffffff;
          z-index: 99;
          border-radius: 50%;
          text-align: center;
          line-height: 26rpx;
          background-color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .noCanUse_box {
      flex: 1;
      width: 100%;
      margin-top: 20rpx;
      // overflow: auto;
    }
    .bottom_btn {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 122rpx;
      background: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 999;
      .btn {
        width: 640rpx;
        height: 76rpx;
        background: #a084f0;
        border-radius: 168rpx 168rpx 168rpx 168rpx;
        font-size: 30rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        line-height: 76rpx;
      }
    }
  }
}
.content-list {
  width: 100%;
  height: calc(100% - 200rpx);
}
</style>
